<template>
    <ayjDrawer class="sales-box" :title="'备注'" width="40%" ref="ayjDrawerShopSellLsRef" :slotFooter="false"
        @closeFun="handleClose">
        <div ref="containerBoxRef" class="container_box">
            <div ref="pointsBoxRef" class="mb10">
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="addTxtLsHandle"
                    style="font-size: 12px;padding:5px">添加备注
                </el-button>
            </div>
            <div class="table_box_scorll" :style="{ height: dynamicHeight + 'px' }">
                <template v-if="isAdd">
                    <div class="mb20 add-box">
                        <el-input v-model="queryParams.txt" placeholder="请输入备注" clearable></el-input>
                        <div class="mt10">
                            <UploadPhotos :list="photoList" @update:list="updatePhotoList" />
                        </div>
                        <div class="mt10">
                            <el-button size="mini" @click="isAdd = false">取消</el-button>
                            <el-button class="ml10" type="primary" size="mini" @click="txtSaveFun">保存</el-button>
                        </div>
                    </div>
                </template>

                <template v-if="txt_ls && txt_ls.length > 0">
                    <div class="cell-box mb10" v-for="(item, index) in txt_ls" :key="index">
                        <div class="flex_between">
                            <span class="font_black7">{{ item.txt || '--' }}</span>
                            <span class="font_black2">{{ item.atime_txt || '--' }}</span>
                        </div>
                        <div class="flex_row mt10">
                            <el-image v-for="(stsrc, _inx) in item.imgs" :key="_inx" :src="stsrc.img_s"
                                :style="{ width: '100px', height: '100px' }" class="avatar" fit="fill"
                                :preview-src-list="[stsrc.img_s]" />
                        </div>
                    </div>
                </template>
                <empty v-else></empty>
            </div>
        </div>
    </ayjDrawer>
</template>

<script setup>
import { ref, reactive, onMounted, computed, getCurrentInstance, defineProps, defineExpose, watch } from '@vue/composition-api'
import { useDynamicHeight } from '@/hooks/useDynamicHeight'
import empty from "@/components/comm/empty.vue";
import UploadPhotos from "@/components/commV2/UploadPhotos/index.vue"
const { proxy } = getCurrentInstance();
import config from "@/js/conf/Config.js";
import { useOrderReceiptState } from '@/pages/warehouseManage/hooks/useOrderReceiptState.js'
const { getEventInfo } = useOrderReceiptState()

// 使用动态高度 hooks
const containerBoxRef = ref(null)
const pointsBoxRef = ref(null)
const { dynamicHeight, updateHeight } = useDynamicHeight({
    containerRef: containerBoxRef,
    subtractRef: pointsBoxRef,
    extraHeight: 20 // 额外的间距
})

const props = defineProps({
    txt_ls: {
        type: Array,
        default: () => []
    },
    id: {
        type: String,
        default: ''
    }
})

const isAdd = ref(false)
const addTxtLsHandle = () => {
    isAdd.value = true
}

const photoList = ref([])
const updatePhotoList = (newList) => {
    console.log("newList=", newList)
    photoList.value = [...newList]
}

const queryParams = ref({
    isopen:2,
    md: "ck",
    obj: "order",
    txt: "",
    imgs: [],
})

const txtSaveFun = async () => {
    let params = {
        ...queryParams.value,
        id: props.id
    };
    if (params.txt == '') {
        proxy.$message({
            message: '请输入备注',
            type: 'error',
        })
        return
    }
    if (photoList.value.length > 0) {
        params.imgs = photoList.value.map(item => item.url)
    }
    let res = await proxy.$api({ url: config.COMM_TXT_SAVE, data: params });
    if (res.status == 1) {
        proxy.$message({
            message: '保存成功',
            type: 'success',
        })
        setTimeout(() => {
            getEventInfo()
            handleClose()
            resetFc()
        }, 1000)
    }
}

const ayjDrawerShopSellLsRef = ref(null)
const open = async () => {
    resetFc()
    ayjDrawerShopSellLsRef.value.open();
    setTimeout(() => {
        updateHeight()
    }, 100)
}

const resetFc = () => {
    isAdd.value = false
    queryParams.value.txt = ''
    photoList.value = []
}

const handleClose = () => {
    ayjDrawerShopSellLsRef.value.close();
}

onMounted(() => { })

defineExpose({
    open
})
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
    padding: 10px 0 !important;
}

.customer_points_top {
    padding: 10px;
    border-radius: 6px;
}

.select_store ::v-deep .el-input__inner {
    background-color: #f5f5f5 !important;
    border: none !important;
    color: #333 !important;
    padding-left: 4px !important;
    text-align: left !important;
    border-radius: 0 !important;
}

.customer_points_top ::v-deep .el-divider--vertical {
    height: 1.5rem !important;
    position: relative;
    left: -10px;
}

.container_box {
    border-radius: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.table_box_scorll {
    box-sizing: border-box;

    .add-box {
        background-color: #f9f9f5;
        padding: 14px;
        border-radius: 4px;
        margin-bottom: 10px;
        border: 1px solid #e4e4e4;

        .el-input__inner {
            background-color: #f5f5f5 !important;
        }

        .el-button {
            margin-top: 10px;
        }
    }

    .cell-box {
        border: 1px solid #f0eeee;
        border-radius: 4px;
        padding: 14px;
        background-color: #fff;
    }
}

.sales-box {
    ::v-deep .el-drawer {
        width: 40% !important;
    }
}
</style>
